import React, { useState, useRef, useEffect } from 'react';
import { Button, Popover } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';

const SelelctModel = (props) => {
  const {
    loading,
    list,
    visible = {},
    onClose,
    onOk,
    data,
    setSelectedRowKeys,
    selectedRowKeys,
  } = props;
  const { show = false, details = [] } = visible;
  const rowSelection = {
    type: 'radio',
    hideSelectAll: true,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRows);
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
    preserveSelectedRowKeys: true,
  };
  useEffect(() => {
    if (show) {
      setSelectedRowKeys(details);
    } else {
      setSelectedRowKeys([]);
    }
  }, [show]);
  // 搜索参数

  const searchItems = [
    {
      label: '名称',
      name: 'keyword',
    },
  ];
  // table 表头
  const getColumns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    },
    {
      title: '封面',
      dataIndex: 'cover',
      render: (val) => {
        return <PopImgShow width={24} url={val}></PopImgShow>;
      },
    },
  ];
  return (
    <>
      <TableDataBlock
        rowSelection={rowSelection}
        loading={loading}
        searchItems={searchItems}
        columns={getColumns}
        params={{ withSkuFlag: '1', status: '1' }}
        rowKey={(record) => `${record.id}`}
        dispatchType="selectionWindow/fetchFaceToFace"
        {...list}
      ></TableDataBlock>
    </>
  );
};

export default connect(({ selectionWindow, loading }) => ({
  list: selectionWindow.faceToFaceList,
  loading: loading.effects['selectionWindow/faceToFaceList'],
}))(SelelctModel);
